<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DCWriterLite Demo</title>
    <link rel="icon" href="./img/favicon.ico">

    <style>
        :root {
            --primary-color: #446995;
            --border-color: #d0d0d0;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        }

        body,
        html,
        .app-container {
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: #f5f5f5;
        }

        .app-container {
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }




        .title-bar-right {
            display: flex;
            align-items: center;
            -webkit-app-region: no-drag;
            display: flex;
            align-items: center;
            -webkit-app-region: no-drag;
            position: fixed;
            top: 28px;
            right: 16px;
        }

        .title-bar-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            cursor: pointer;
            border: none;
            background: none;
            color: #ffffff;
            transition: background-color 0.2s ease;
        }

        .title-bar-btn:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .title-bar-btn:active {
            background-color: rgba(255, 255, 255, 0.2);
        }

        .title-bar-btn svg {
            width: 16px;
            height: 16px;
        }

        /* 全屏样式 */
        .app-container.fullscreen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 9999;
            background-color: #f5f5f5;
        }

        .app-container.fullscreen .title-bar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 10000;
        }


        /* 全屏按钮图标切换 */
        .title-bar-btn.fullscreen-active svg {
            transform: rotate(180deg);
        }

        /* Ribbon菜单容器 */
        .ribbon-container {
            background-color: #fff;
            border-bottom: 1px solid var(--border-color);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }


        .ribbon-container-top {
            width: 100%;
            overflow-y: hidden;
            display: flex;
            background-color: #446995;
            padding: 0 16px;
            color: #ffffff;
            padding-top: 22px;
        }

        .tabs-container-item-left {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            margin-right: 6px;
        }

        .tabs-container-item-left-item {
            display: flex;
            align-items: center;
            gap: 4px;
            cursor: pointer;
        }

        .tabs-container-item-left-item:hover {
            background-color: rgba(237, 235, 233, 0.4)
        }

        .tabs-container-item-line {
            height: 18px;
            border-right: 1px solid #c9c9c9;
            margin: 0 10px;
        }

        /* 选项卡栏 */
        .tabs-container {
            display: flex;
            background-color: #446995;
            padding: 0 16px;
            color: #ffffff;
        }

        .tab {
            padding: 10px 38px;
            cursor: pointer;
            font-size: 14px;
            border: none;
            background: none;
            color: #ffffff;
        }

        .tab.active {
            background-color: #f2f2f2;
            color: #446995;
        }

        .tab:hover:not(.active) {
            background-color: rgba(237, 235, 233, 0.4);
        }

        .ribbon-group {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* Ribbon内容区 */
        .ribbon-content {
            width: 100%;
            height: 100px;
            padding: 12px 16px;
            background: #f2f2f2;
            overflow: hidden;
            box-sizing: border-box;
            display: none;
        }

        .ribbon-content.active {
            display: block;
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .group-title {
            font-size: 12px;
            text-align: center;
        }

        .group-controls {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
        }

        .control-btn {
            display: flex;
            align-items: center;
            padding: 4px;
            background: none;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            position: relative;
            justify-content: center;
        }

        .control-btn.active,
        .control-btn:hover {
            background-color: #e2e2e2;
        }

        .Clipboard-group-list {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .ribbon-groups {
            user-select: none;
            display: flex;
            height: 100%;
            width: 100%;
        }

        .divider {
            width: 1px;
            border-right: 1px dashed var(--border-color);
            margin: 0 16px;
        }

        /* 文档区域 */
        .document-container {
            flex: 1;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            background: #fff;
        }

        /* 文档tab切换 */
        .writerControlTabBtns {
            display: flex;
            cursor: pointer;
            background: #f2f2f2;
            /* 横向滚动且不换行 */
            flex-wrap: nowrap;
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
            gap: 0;
            scroll-behavior: smooth;
        }

        .document-container-btn-item {
            padding: 6px 12px 6px 16px;
            cursor: pointer;
            font-size: 14px;
            box-sizing: border-box;
            border-right: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: flex-start;
            background-color: #f2f2f2;
            color: #446995;
            /* 每个子项不伸缩，保持单行显示 */
            flex: 0 0 auto;
            white-space: nowrap;
        }

        .document-container-btn-item-active {
            background-color: #446995;
            color: #f2f2f2;
        }

        .document-container-btn-item .document-container-btn-item-close {
            margin-left: 14px;
            background: rgb(226 226 226 / 60%);
            border-radius: 8px;
            width: 14px;
            height: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 3px;
            box-sizing: border-box;
        }

        .document-container-btn-item .document-container-btn-item-close:hover {
            background: rgb(226 226 226);
        }

        .document-container-item {
            display: none;
            height: 100%;
            overflow: hidden;
        }

        .document-container-item-active {
            display: block;
        }

        /* 状态栏 */
        .status-bar {
            background-color: #fff;
            padding: 0 16px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-top: 1px solid var(--border-color);
            font-size: 12px;
        }

        .status-items {
            display: flex;
        }

        .status-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        /* 下拉框样式 */
        .dropdown-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0 4px;
            position: relative;
            justify-content: center;
        }

        .ribbon-dropdown {
            padding: 6px 24px 6px 8px;
            border: 1px solid #a6a6a6;
            border-radius: 3px;
            background-color: white;
            font-size: 12px;
            color: #333;
            min-width: 120px;
            height: 28px;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 6px center;
            background-size: 16px;
            cursor: pointer;
            outline: none;
        }

        .ribbon-dropdown:hover {
            border-color: #666;
        }

        .ribbon-dropdown:focus {
            border-color: #446995;
            box-shadow: 0 0 0 1px #446995;
        }

        .dropdown-label {
            font-size: 11px;
            color: #666;
            margin-top: 4px;
            text-align: center;
        }

        .writerControlTabsContainer {
            flex: 1;
            overflow: hidden;
        }

        #progress {
            height: 3px;
            width: 200px;
            background-color: #e2e2e2;
            position: relative;
        }

        #progress_pill {
            position: absolute;
            height: 100%;
            background-color: #a6a6a6;
            left: 0;
            top: 0;
            width: 37px;
        }

        #progress #bar {
            position: absolute;
            top: -3px;
            left: 37px;
            height: 10px;
            width: 5px;
            background-color: #a6a6a6;
            cursor: pointer;
        }

        #progress #bar:hover {
            background-color: #90b9d8;
        }

        #progress_text {
            padding-left: 6px;
            border-left: 1px solid #ccc;
            margin-left: 6px;
        }

        .group-controlsFont {
            width: 260px;
            justify-content: space-between;
        }

        .group-controls.group-controlsParagraph {
            width: 174px;
            justify-content: space-between;
        }

        .dropdown-list-dialog {
            position: fixed;
            z-index: 1000;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
            /* background: #00000020; */
        }

        .dropdown-list {
            position: fixed;
            max-height: 400px;
            max-width: 400px;
            overflow: auto;
            background-color: white;
            border-radius: 4px;
            z-index: 1001;
            border: 1px solid #bebebe;
        }

        .dropdown-list-item {
            padding: 10px 14px;
            color: #333333;
            font-size: 12px;
            font-family: revert;
            cursor: pointer;
        }

        .dropdown-list-item-hr {
            width: 100%;
            height: 1px;
            background-color: #e5e5e5;
            padding: 0;
            margin: 0;
        }

        .dropdown-list-item:hover {
            background: #f2f2f2;
        }

        .dropdownIcon {
            margin-left: 4px;
        }

        #ToolBarInsert-content .divider {
            width: 1px;
            background-color: #00000000;
            margin: 0 16px;
            border-right: 1px dashed #ccc;
        }

        #ToolBarTable-content .control-btn {
            flex-direction: column;
            font-size: 12px;
            text-align: center;
            margin: 0 3px;
        }

        .cell.active {
            background: #4285f4 !important;
            border-color: #4285f4 !important;
        }

        .btnInsertRowAbove,
        .btnInsertRowBelow,
        .btnInsertColumnLeft,
        .btnInsertColumnRight,
        .btnDeleteColumn,
        /* .btnTableBorder, */
        .btnDeleteRow,
        .btnClosePrintPreview,
        .btnPrintPreview,
        .group-controls.group-controlsAlign .control-btn span {
            display: none;
        }

        div#ToolBarPrintView-content .control-btn span,
        div#ToolBarInsert-content .control-btn span {
            color: #444444;
            margin-left: 4px;
            font-size: 12px;
        }

        div#ToolBarInsert-content .group-controls.group-controlsCheck {
            width: 88px;
            justify-content: space-between;
        }

        div#ToolBarInsert-content .group-controls.group-controlsFile {
            width: 150px;
            justify-content: space-between;
        }

        div#ToolBarInsert-content .group-controls.group-controlsCheck .control-btn {
            width: 100%;
            justify-content: start;
        }

        div#ToolBarInsert-content .group-controls.group-controlsFile .control-btn {
            width: 75px;
            justify-content: flex-start;
        }

        .group-title.Print.Page,
        .group-controls.group-controlsPrint .btnPrint {
            display: none;
        }

        .group-controls.group-controlsPrint.Page .control-btn {
            width: 160px;
            justify-content: start;
        }

        div[dctype="WriterControlForWASM"] {
            background: #e2e2e2;
        }

        #btnFontName {
            width: 120px;
        }

        .ribbon-group.ribbon-groupStyle {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            max-width: 700px;
        }

        .group-controls.group-controlsStyle {
            width: 100%;
            height: 100%;
            /* overflow-x: auto; */
        }

        .font-style-list {
            width: 700px;
            height: 80%;
            display: flex;
            flex-wrap: nowrap;
            background: #ffffff;
            border: 1px solid #ccc;
            overflow-x: auto;
        }

        .font-style-item {
            flex: 1;
            min-width: 100px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid #00000000;
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            color: #434343;
        }

        .font-style-item.active,
        .font-style-item:hover {
            border: 2px solid #cccccc;
        }

        .font-style-box {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
        }

        .group-title.Style {
            display: none;
        }

        /* 剩余宽度小于1000时，隐藏部分功能 */
        @media screen and (max-width: 1240px) {
            .ribbon-group.ribbon-groupStyle {
                display: none;
            }

            .ribbon-group.ribbon-groupStyle+.divider {
                display: none;
            }

            .group-title {
                display: none;
            }

            .ribbon-group.ribbon-groupLayout svg.icon,
            .ribbon-group.ribbon-groupMode svg.icon {
                width: 16px;
                height: 16px;
            }

            .divider {
                margin: 0 6px;
            }
        }

        /* Toast bubble */
        .toast-container {
            position: fixed;
            top: 80px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10001;
            pointer-events: none;
        }

        .toast-bubble {
            background-color: #E6A23C;
            color: #ffffff;
            padding: 8px 12px;
            border-radius: 6px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            margin-top: 8px;
            font-size: 12px;
            opacity: 0;
            transform: translateY(-6px);
            transition: opacity 0.2s ease, transform 0.2s ease;
        }

        .toast-bubble.show {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>

<body>
    <div class="app-container">

        <div class="title-bar-right">
            <div class="title-bar-btn" id="fullscreen-enter-btn" title="Full Screen (F11)">
                <svg t="1755487761269" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="9024" width="18" height="18">
                    <path
                        d="M240.8 196l178.4 178.4-45.6 45.6-177.6-179.2-68 68V128h180.8l-68 68z m133.6 408.8L196 783.2 128 715.2V896h180.8l-68-68 178.4-178.4-44.8-44.8zM715.2 128l68 68-178.4 178.4 45.6 45.6 178.4-178.4 68 68V128H715.2z m-65.6 476.8l-45.6 45.6 178.4 178.4-68 68H896V715.2l-68 68-178.4-178.4z"
                        p-id="9025" fill="#ffffff"></path>
                </svg>
            </div>
            <div class="title-bar-btn" id="fullscreen-exit-btn" title="Exit Full Screen (F11)" style="display:none;">
                <svg t="1755487802214" class="icon" viewBox="0 0 1024 1024" version="1.1"
                    xmlns="http://www.w3.org/2000/svg" p-id="9444" width="18" height="18">
                    <path
                        d="M142.4 96.8l-44.8 44.8 173.6 174.4-68 68H384V203.2l-67.2 67.2zM752.8 316l173.6-174.4-44.8-44.8-174.4 173.6-67.2-67.2V384h180.8zM270.4 707.2l-169.6 170.4 44.8 49.6 170.4-174.4 68 68V640H203.2zM820.8 640H640v180.8l68-68 170.4 174.4 44.8-49.6-169.6-170.4z"
                        p-id="9445" fill="#ffffff"></path>
                </svg>
            </div>
        </div>
        <!-- Ribbon菜单 -->
        <div class="ribbon-container" id="ribbon-container">
            <div class="ribbon-container-top">
                <div class="tabs-container-item-left">
                    <div class="tab tabs-container-item-left-item" id="template-btn" title="Open Template List">
                        <svg t="1755239952081" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="20607" width="24" height="24">
                            <path
                                d="M334.336 514.56c0 15.872 12.8 29.184 29.184 29.184h297.984c15.872 0 29.184-12.8 29.184-29.184s-12.8-29.184-29.184-29.184H363.008c-15.872 0-28.672 13.312-28.672 29.184z"
                                fill="#ffffff" p-id="20608"></path>
                            <path d=" M512 336.896c-15.872 0-29.184 12.8-29.184 29.184v297.984c0 15.872 12.8 29.184
                                29.184 29.184s29.184-12.8 29.184-29.184V365.568c0-15.872-13.312-28.672-29.184-28.672z"
                                fill="#ffffff" p-id="20609"></path>
                            <path
                                d="M825.344 201.216C742.4 118.272 629.248 71.68 512 71.68c-117.76 0-230.4 46.592-313.344 129.536a438.62016 438.62016 0 0 0-129.536 313.344c0 117.248 46.592 229.888 129.536 312.832C281.6 910.848 394.24 957.44 512 957.44s230.4-46.592 313.344-129.536c83.456-82.944 130.048-195.584 129.536-313.344 0-117.76-46.592-230.4-129.536-313.344zM785.92 788.48c-73.216 73.216-170.496 113.664-273.92 113.664-102.912 0.512-201.728-40.448-273.92-113.664-73.216-73.216-113.664-170.496-113.664-273.92-0.512-102.912 40.448-201.728 113.664-273.92C311.296 167.424 408.576 126.976 512 126.976c102.912-0.512 201.728 40.448 273.92 113.664 73.216 73.216 113.664 170.496 113.664 273.92 0.512 102.912-40.448 201.728-113.664 273.92z"
                                fill="#ffffff" p-id="20610"></path>
                        </svg>
                        <span style="line-height: 10px;">Demo Documents</span>
                    </div>
                    <div class="tabs-container-item-line"></div>
                    <!-- <div title="open" class="title-bar-btn"><svg t="1750230134011" class="icon" viewBox="0 0 1024 1024"
                            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13921" width="16" height="16">
                            <path d="M831.9 395.4zM831.9 395.8c0 0.1 0.1 0.2 0.1 0.4v-0.7c-0.1 0-0.1 0.1-0.1 0.3z"
                                p-id="13922" fill="#ffffff">
                            </path>
                            <path
                                d="M922.8 497.1H184.5c-26.7 0-50.4 17.3-58.6 42.7L61.5 738.2V203.5h307.7c0 68 55 123 122.9 123h307.6V419c0.2 16.8 13.8 30.4 30.7 30.4 17 0 30.7-13.8 30.7-30.7 0-0.1-0.1-0.2-0.1-0.4h0.2v-91.8c0-34-27.5-61.5-61.5-61.6H492.1c-34 0-61.5-27.5-61.5-61.5 0-16.3-6.5-31.9-18-43.4s-27.2-18-43.4-18H61.5C27.6 142 0.1 169.5 0 203.4v724.2c0.1 34 27.6 61.4 61.6 61.4h738.1c26.8 0 50.5-17.2 58.7-42.7l125.9-387.7c-0.1-33.9-27.5-61.4-61.5-61.5zM983.5 173c-38.2-74-158.9-228.5-457-67.5 0 0 328.2-81.3 367.9 99.8l-54.4 1.3 134.4 84.5 49.4-150.8-40.3 32.7z"
                                p-id="13923" fill="#ffffff"></path>
                        </svg></div>
                    <div title="save" class="title-bar-btn"><svg t="1750230043038" class="icon" viewBox="0 0 1024 1024"
                            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12557" width="16" height="16">
                            <path d="M547.4 65.9h124.4v203.7H547.4z" fill="#ffffff" p-id="12558"></path>
                            <path d="M218.7 589.9h597v29.5h-597zM218.7 728h597v29.5h-597zM218.7 870.3h597v29.5h-597z"
                                fill="#ffffff" p-id="12559"></path>
                            <path
                                d="M999.3 210.6L816.9 23.9c-8.5-8.7-18.9-15.4-30.3-19.5C770-1.6 752.4 0.3 735.2 0.3h-661c-39.6 0-72 32.4-72 72v878.5c0 39.6 32.4 72 72 72h876c39.6 0 72-32.4 72-72V277.1c0-12.6 0.2-24-3.9-36.1-4.1-11.4-10.5-21.8-19-30.4z m-682-183H729.7V325H317.3V27.6z m580.4 964H132.4V504.7H897.7v486.9z m93-114.2h-59.6v-50.8h59.6v50.8z"
                                fill="#ffffff" p-id="12560"></path>
                        </svg></div>
                    <div title="prev" class="title-bar-btn">
                        <svg t="1750230463215" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="18451" width="16" height="16">
                            <path
                                d="M365.44 112.32v133.76h237.888a340.928 340.928 0 0 1 340.928 335.36v5.632a340.928 340.928 0 0 1-335.296 340.864l-5.632 0.064h-324.48a16 16 0 0 1-16-16v-64a16 16 0 0 1 16-16h324.48a244.928 244.928 0 0 0 5.12-489.856H130.432a16 16 0 0 1-11.136-27.52l218.88-213.76a16 16 0 0 1 27.2 11.456z"
                                fill="#ffffff" p-id="18452"></path>
                        </svg>
                    </div>
                    <div title="next" class="title-bar-btn">
                        <svg t="1750230422181" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="17300" width="16" height="16">
                            <path
                                d="M670.08 112.32v133.76H432.192a340.928 340.928 0 0 0-340.928 335.36v5.632a340.928 340.928 0 0 0 335.296 340.864l5.632 0.064h324.48a16 16 0 0 0 16-16v-64a16 16 0 0 0-16-16h-324.48a244.928 244.928 0 0 1-5.12-489.856h477.952a16 16 0 0 0 11.2-27.52l-219.008-213.76a16 16 0 0 0-27.136 11.456z"
                                fill="#ffffff" p-id="17301"></path>
                        </svg>
                    </div>
                    <div class="tabs-container-item-line"></div> -->
                </div>
                <!-- 选项卡 -->
                <div class="tabs-container" id="tabs-container">

                </div>
                <div class="tabs-container-item-right">

                </div>
            </div>

        </div>

        <div class="document-container">
            <div class="writerControlTabBtns" id="writerControlTabBtns">
                <!-- Tab按钮将在这里动态生成 -->
            </div>
            <div class="writerControlTabsContainer" id="writerControlTabsContainer">
                <!-- Tab内容将在这里动态生成 -->
            </div>
        </div>
        <!-- 状态栏 -->
        <div class="status-bar">
            <div class="status-items">
                <div id="abortText">
                    Status：<span id="lblStatus">...</span>
                </div>
            </div>
            <div id="scaleBox">
                <div style="display: flex;align-items: center;">
                    <span style="margin-right:4px;">0.1</span>
                    <div id="progress">
                        <div id="progress_pill"></div>
                        <span id="bar"></span>
                    </div>
                    <span style="margin-right:4px;">&nbsp;5.0</span>
                    <span id="progress_text"> Zoom: 1.0</span>
                </div>
            </div>
        </div>
    </div>
    <script src="_framework/dcwriter5.js"></script>
    <script src="js/DCWriterLife.js"></script>
    <script src="js/DemoApp.js"></script>
    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/DomeDocuments.js"></script>
    <script>
        // 全屏/退出全屏控制
        (function () {
            function setupFullscreenControls() {
                var appContainer = document.querySelector('.app-container');
                var btnEnter = document.getElementById('fullscreen-enter-btn');
                var btnExit = document.getElementById('fullscreen-exit-btn');

                if (!appContainer || !btnEnter || !btnExit) return;

                function isFullscreen() {
                    return !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement);
                }

                function updateUI() {
                    var full = isFullscreen();
                    if (full) {
                        appContainer.classList.add('fullscreen');
                        btnEnter.style.display = 'none';
                        btnExit.style.display = 'flex';
                    } else {
                        appContainer.classList.remove('fullscreen');
                        btnEnter.style.display = 'flex';
                        btnExit.style.display = 'none';
                    }
                }

                function requestFull(el) {
                    (el.requestFullscreen || el.webkitRequestFullscreen || el.mozRequestFullScreen || el.msRequestFullscreen)?.call(el);
                }

                function exitFull() {
                    (document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen)?.call(document);
                }

                btnEnter.addEventListener('click', function (e) {
                    e.stopPropagation();
                    if (!isFullscreen()) requestFull(appContainer);
                });

                btnExit.addEventListener('click', function (e) {
                    e.stopPropagation();
                    if (isFullscreen()) exitFull();
                });

                // 监听全屏状态变化
                ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'MSFullscreenChange'].forEach(function (evt) {
                    document.addEventListener(evt, updateUI);
                });

                // F11 快捷键
                document.addEventListener('keydown', function (e) {
                    if (e.key === 'F11') {
                        e.preventDefault();
                        if (!isFullscreen()) requestFull(appContainer); else exitFull();
                    }
                });

                // 初始状态
                updateUI();
            }

            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', setupFullscreenControls);
            } else {
                setupFullscreenControls();
            }
        })();
    </script>
    <script>
        var toolboxdescription = null;
        //请求动态json
        fetch('./toolboxdescription.json')
            .then(response => response.json())
            .then(data => {
                toolboxdescription = data;
                initToolBar(data);
            }).catch(error => {
                console.error('加载JSON文件时出错:', error);
            });
    </script>
    <script>

        /**
         * 控件加载完毕后会自动执行名为 WriterControl_OnLoad 的函数.该函数内的this变量指向HTML根元素
         * @param { WriterControl } rootElement
         */
        function WriterControl_OnLoad(rootElement) {
            rootElement.SelectionChanged = function (eventSender, args) {
                var info = this.GetCurrentContentInfo();
                initToolbarActive();



                //修改底部状态条内容
                var txt =
                    "Page: " + (info.FocusedPageIndexBase0 + 1) + ", Line: " +
                    info.CurrentLineIndexInPage + ", Column: " +
                    info.CurrentColumnIndex + ".&nbsp;&nbsp;";
                if (info.SelectionLength != 0) {
                    txt = txt +
                        Math.abs(info.SelectionLength) + " items selected.&nbsp;&nbsp;";
                }
                var p = info.SelectionStartPosition;
                txt = txt + "X: " + p.X + " Y: " + p.Y;
                document.getElementById('lblStatus').innerHTML =
                    txt + ".&nbsp;&nbsp;Current Font: " + info.CurrentFontName + ", " + info.CurrentFontSize + ".";
            };
            rootElement.DocumentLoad = function (eventSender, args) {
            };
            rootElement.EventShowContextMenu = Handle_EventShowContextMenu;// 这个函数定义在DemoApp.js中
            rootElement.EventUpdateToolarState = Handle_EventUpdateToolarState;// 这个函数定义在DemoApp.js中
            //缩放toobar
            var progress = document.getElementById('progress');
            var progress_pill = document.getElementById('progress_pill');
            var progress_text = document.getElementById('progress_text');
            var bar = progress.children[1];
            var moveWidth = progress.offsetWidth - bar.offsetWidth;
            bar.onmousedown = function (event) {
                var e = window.event || event;
                var clientX = event.clientX - bar.offsetLeft;
                console.log(progress.offsetWidth);
                document.body.onmousemove = function (event) {
                    event = event || window.event;
                    var moveX = event.clientX - clientX;
                    if (moveX <= 0) {
                        moveX = 0;
                    } else if (moveX >= moveWidth) {
                        moveX = moveWidth;
                    }
                    bar.style.left = moveX + 'px';
                    progress_pill.style.width = moveX + 'px';
                    progress_text.innerHTML = ' Zoom: ' + (moveX / moveWidth * 5).toFixed(1);
                    SetZoomRate((moveX / moveWidth * 5).toFixed(1));
                    return false;
                };
                document.body.onmouseup = function () {
                    document.body.onmousemove = null;
                };
            };
            document.onmousewheel = function () {
                SetMouseWheelScaleChange();
            };
        };

        /** 文档内容发生改变事件*/
        function WriterControl_DocumentContentChanged(rootElement) {
            console.log('文档发生改变');
        };
        function SetMouseWheelScaleChange() {
            if (GetCurrentWriterControl() && GetCurrentWriterControl().__DCWriterReference) {
                let scaleNum = GetCurrentWriterControl().__DCWriterReference.invokeMethod("get_ZoomRate");
                progress_text.innerHTML = ' Zoom: ' + scaleNum.toFixed(1);
                progress_pill.style.width = (scaleNum.toFixed(1) * (progress.offsetWidth / 5)) + 'px';
                bar.style.left = ((scaleNum.toFixed(1) * (progress.offsetWidth / 5)) - 5) + 'px';
            }
        }
        //放大缩小
        function SetZoomRate(value) {
            var rate = parseFloat(value);
            let ctl = GetCurrentWriterControl();
            ctl.SetZoomRate(rate);
        }



    </script>

    <script>
        function initToolBar(data) {
            const tabsContainer = document.getElementById('tabs-container');
            const ribbonContainer = document.getElementById('ribbon-container');

            // 添加下拉框的CSS样式
            const style = document.createElement('style');
            style.textContent = `
                /* 下拉框容器样式 */
                .dropdown-container {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    margin: 0 4px;
                    position: relative;
                }
                
                /* 下拉框本身样式 */
                .ribbon-dropdown {
                    padding: 6px 24px 6px 8px;
                    border: 1px solid #a6a6a6;
                    border-radius: 3px;
                    background-color: white;
                    font-size: 12px;
                    color: #333;
                    min-width: 120px;
                    height: 28px;
                    appearance: none;
                    -webkit-appearance: none;
                    -moz-appearance: none;
                    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666666'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
                    background-repeat: no-repeat;
                    background-position: right 6px center;
                    background-size: 16px;
                    cursor: pointer;
                    outline: none;
                }
                
                /* 下拉框悬停效果 */
                .ribbon-dropdown:hover {
                    border-color: #666;
                }
                
                /* 下拉框聚焦效果 */
                .ribbon-dropdown:focus {
                    border-color: #446995;
                    box-shadow: 0 0 0 1px #446995;
                }
                
                /* 下拉框禁用状态 */
                .ribbon-dropdown:disabled {
                    background-color: #f5f5f5;
                    color: #999;
                    cursor: not-allowed;
                }
                
                /* 下拉框标签样式 */
                .dropdown-label {
                    font-size: 11px;
                    color: #666;
                    margin-top: 4px;
                    text-align: center;
                }
            `;
            document.head.appendChild(style);

            // 1. 创建选项卡
            data.toolBars.forEach((toolbar, index) => {
                // 创建Tab按钮
                const tab = document.createElement('button');
                tab.className = 'tab';
                tab.textContent = toolbar.title;
                tab.dataset.tabId = toolbar.id;

                // 默认激活第一个Tab
                if (index === 0) {
                    tab.classList.add('active');
                }

                // 点击事件
                tab.addEventListener('click', () => {
                    // 移除所有Tab的active类
                    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
                    // 为当前Tab添加active类
                    tab.classList.add('active');
                    // 显示对应的内容
                    showRibbonContent(toolbar.id);
                });

                tabsContainer.appendChild(tab);

                // 创建对应的内容区域
                createRibbonContent(toolbar);
            });

            // 默认显示第一个内容
            if (data.toolBars.length > 0) {
                showRibbonContent(data.toolBars[0].id);
            }

            // 2. 创建Ribbon内容区域
            function createRibbonContent(toolbar) {
                const content = document.createElement('div');
                content.className = 'ribbon-content';
                content.id = `${toolbar.id}-content`;

                // 创建分组
                const groupsContainer = document.createElement('div');
                groupsContainer.className = 'ribbon-groups';

                toolbar.groups.forEach(group => {
                    const groupElement = document.createElement('div');
                    groupElement.className = 'ribbon-group ribbon-group' + group.text;



                    // 创建控件容器
                    const controlsContainer = document.createElement('div');
                    controlsContainer.className = 'group-controls group-controls' + group.text;

                    // 添加控件
                    group.childItems.forEach(item => {
                        if (item.type === 'button') {
                            //普通按钮
                            const button = document.createElement('div');
                            button.className = 'control-btn';
                            button.id = item.id || '';
                            // button.dataset.command = item.commandName;
                            button.title = item.text || '';

                            // 模拟图标
                            if (item.icon) {
                                var svgInner = SVG_Dictionary[item.icon] || item.icon;
                                if (toolbar.title === "Table" || toolbar.title === "Insert" || toolbar.title === "Print") {
                                    svgInner += `<span class="${item.id}">${item.text}</span>`;
                                }
                                button.innerHTML = svgInner;
                            }

                            controlsContainer.appendChild(button);
                            // 点击事件
                            button.addEventListener('click', () => {
                                if (item.commandName) {
                                    handleDCExecuteCommand(item);
                                } else {
                                    console.log(`执行命令有错误`);
                                }
                            });
                        } else if (item.type === 'select') {
                            // 选择框
                            const container = document.createElement('div');
                            container.className = 'dropdown-container';

                            // 创建下拉框
                            const select = document.createElement('select');
                            select.className = 'ribbon-dropdown';
                            select.id = item.id;
                            select.title = item.text;

                            // 添加选项
                            item.childItems.forEach(optionText => {
                                const option = document.createElement('option');
                                option.value = optionText.value;
                                option.textContent = optionText.label;
                                if (item.id === 'btnFontName') {
                                    option.style.fontFamily = optionText.value;
                                }
                                // if (item.id === 'btnFontSize') {
                                //     option.style.fontSize = optionText.value + "px";
                                // }

                                select.appendChild(option);
                            });
                            container.appendChild(select);
                            controlsContainer.appendChild(container);

                            // 变更事件
                            select.addEventListener('change', () => {
                                console.log(`选择 ${select.value} 为 ${item.commandName}`);

                                // 执行命令
                                handleDCExecuteCommand(item, select.value);

                            });
                        } else if (item.type === 'dropdownList') {
                            //下拉选择
                            const iconDiv = document.createElement('div');
                            iconDiv.className = 'control-btn control-btn-dropdown';
                            iconDiv.title = item.text || '';
                            // 模拟图标
                            if (item.icon) {
                                var svgInner = (SVG_Dictionary[item.icon] || item.icon) + SVG_Dictionary.dropDownIcon;
                                if (toolbar.title === "Table" || toolbar.title === "Insert") {
                                    svgInner += `<span class="${item.id}">${item.text}</span>`;
                                }
                                iconDiv.innerHTML = svgInner;

                            }
                            controlsContainer.appendChild(iconDiv);

                            // 点击事件
                            iconDiv.addEventListener('click', () => {
                                if (item.commandName) {
                                    createDropDownList(iconDiv, item);
                                } else {
                                    console.log(`执行命令有错误`);
                                }
                            });
                        } else if (item.type === 'fontStyle') {
                            //特殊的字体样式
                            var fontStyleBox = document.createElement('div');
                            fontStyleBox.className = 'font-style-box';
                            createFontStyleList(fontStyleBox, item);
                            controlsContainer.appendChild(fontStyleBox);
                        } else if (item.type === 'colorPicker') {
                            var colorPickerBox = document.createElement('div');
                            colorPickerBox.className = 'control-btn color-picker-box';
                            if (item.icon) {
                                colorPickerBox.innerHTML = SVG_Dictionary[item.icon] || item.icon;
                            }
                            controlsContainer.appendChild(colorPickerBox);
                            // // 创建颜色选择器
                            const picker = new Picker({
                                parent: colorPickerBox, // 挂载到 body
                                color: "#000000",
                                popup: 'bottom',
                                onDone: function (color) {
                                    console.log('OK 按钮被点击，选择的颜色:', color.hex);
                                    handleDCExecuteCommand(item, color.hex);
                                    //修改页面icon的填充色
                                    var pathDom = document.getElementById(`dcIconpath${item.commandName}`);
                                    if (pathDom) {
                                        pathDom.setAttribute('fill', color.hex);
                                    }
                                },
                                onOpen: function () {
                                    // 颜色选择器弹出时，修改位置
                                    var left = colorPickerBox.offsetLeft;
                                    var top = colorPickerBox.offsetTop + colorPickerBox.offsetHeight;
                                    picker.domElement.style.position = 'fixed';
                                    picker.domElement.style.left = left + 'px';
                                    picker.domElement.style.top = top + 'px';
                                    //颜色复显
                                    var rootElement = GetCurrentWriterControl();
                                    var currentColor = rootElement.CurrentStyle;
                                    if (rootElement.CurrentStyle && rootElement.CurrentStyle[item.commandName]) {
                                        picker.setColor(rootElement.CurrentStyle[item.commandName]);
                                    }
                                }
                            });
                        }
                    });

                    groupElement.appendChild(controlsContainer);
                    groupsContainer.appendChild(groupElement);
                    // 如果有分组标题
                    if (group.text) {
                        const title = document.createElement('div');
                        title.className = 'group-title ' + group.text;
                        title.textContent = group.text;
                        groupElement.appendChild(title);
                    }
                    // 添加分隔线（除了最后一个）
                    if (group !== toolbar.groups[toolbar.groups.length - 1]) {
                        const divider = document.createElement('div');
                        divider.className = 'divider';
                        groupsContainer.appendChild(divider);
                    }
                });

                content.appendChild(groupsContainer);
                ribbonContainer.appendChild(content);
            }

            // 3. 显示指定的Ribbon内容
            function showRibbonContent(tabId) {
                // 隐藏所有内容
                document.querySelectorAll('.ribbon-content').forEach(content => {
                    content.classList.remove('active');
                });

                // 显示当前内容
                const content = document.getElementById(`${tabId}-content`);
                if (content) {
                    content.classList.add('active');
                }
            }
        }
        //创建下拉列表
        function createDropDownList(iconDiv, item) {
            var id = item.id;
            var options = item.childItems;
            var commandName = item.commandName;
            console.log('创建下拉列表', iconDiv);
            var dropdownID = 'dropdown-list-dialog-' + id;
            if (document.getElementById(dropdownID)) {
                return;
            }
            var dialog = document.createElement('div');
            dialog.id = dropdownID;
            dialog.className = 'dropdown-list-dialog';

            // 创建选项列表
            var selectBox = document.createElement('div');
            selectBox.className = 'dropdown-list';
            selectBox.style.left = `${iconDiv.offsetLeft}px`;
            selectBox.style.top = `${iconDiv.offsetTop + iconDiv.offsetHeight}px`;

            options.forEach(optionText => {
                var option = null;
                if (typeof optionText === "string") {
                    if (optionText === "<hr/>") {
                        option = document.createElement('div');
                        option.className = 'dropdown-list-item dropdown-list-item-hr';
                    } else {
                        option = document.createElement('div');
                        option.className = 'dropdown-list-item';
                        option.textContent = optionText;
                        option.addEventListener('click', () => {
                            // 执行命令
                            handleDCExecuteCommand(item, optionText);
                            // 隐藏下拉列表
                            dialog.remove();
                            var rootElement = GetCurrentWriterControl();
                            rootElement.Focus();
                        });
                    }

                } else if (typeof optionText === "object") {
                    console.log('自定义下拉为复杂对象时，，，，');
                }

                option && selectBox.appendChild(option);
            });
            dialog.appendChild(selectBox);

            //    点击空白区域隐藏下拉列表
            dialog.addEventListener('click', function (event) {
                event.stopPropagation();
                event.preventDefault();
                if (event.target === dialog) {
                    dialog.remove();
                }
            });
            // 显示下拉列表
            iconDiv.appendChild(dialog);
        }
        //创建特殊字体可视列表
        function createFontStyleList(box, item) {
            console.log('创建特殊字体可视列表', box);
            if (item.childItems && item.childItems.length > 0) {
                var selectBox = document.createElement('div');
                selectBox.className = 'font-style-list';
                item.childItems.forEach(optionText => {
                    var option = document.createElement('div');
                    option.className = 'font-style-item';
                    option.textContent = optionText.label;
                    option.style.fontSize = optionText.value + "px";
                    option.style.fontWeight = optionText.fontWeight;
                    //标题样式触发的事件
                    option.addEventListener('click', (e) => {
                        var prevActive = document.querySelector('.font-style-item.active');
                        if (prevActive) {
                            prevActive.classList.remove('active');
                        }
                        var rootElement = GetCurrentWriterControl();
                        rootElement.ExecuteCommand("TitleLevel", false, optionText.value);
                        rootElement.DCExecuteCommand("bold", false, optionText.label !== 'bodyText');
                        rootElement.DCExecuteCommand("fontSize", false, optionText.fontSize);

                        option.classList.add('active');
                    });
                    selectBox.appendChild(option);
                });
                box.appendChild(selectBox);
            }
        }



        // 处理DCWriter命令
        function handleDCExecuteCommand(commandItem, commandOption = null) {
            var rootElement = GetCurrentWriterControl();
            if (!rootElement) {
                return false;
            }
            var commandName = commandItem.commandName || '';
            var command = commandName.toLowerCase().trim();

            console.log(`执行命令 ${command},${commandOption}`);

            switch (command) {
                case "fileopen":
                    fileOpen();
                    break;
                case "savexml":
                    rootElement.DownLoadFile('xml');
                    break;
                case "savepdf":
                    rootElement.DownLoadFile('local.pdf');
                    break;
                case "charactercircle":
                    rootElement.DCExecuteCommand("charactercircle", true, null);
                    break;
                case "indent":
                    //设置缩进
                    var leftIndent = rootElement.GetCurrentParagraphStyle().LeftIndent || 0;
                    leftIndent = parseFloat(leftIndent);
                    rootElement.SetCurrentParagraphStyle({
                        LeftIndent: leftIndent + 30
                    });
                    break;
                case 'leftindent':
                    //取消缩进
                    var leftIndent = rootElement.GetCurrentParagraphStyle().LeftIndent || 0;
                    leftIndent = parseFloat(leftIndent);
                    rootElement.SetCurrentParagraphStyle({
                        LeftIndent: leftIndent - 30
                    });
                    break;
                case "rowspacingtop":
                    var SpacingBeforeParagraph = rootElement.GetCurrentParagraphStyle().SpacingBeforeParagraph || 0;
                    rootElement.DCExecuteCommand("rowspacing", false, (SpacingBeforeParagraph + 30) + ',top');
                    break;
                case "rowspacingbottom":
                    var SpacingAfterParagraph = rootElement.GetCurrentParagraphStyle().SpacingAfterParagraph || 0;
                    rootElement.DCExecuteCommand("rowspacing", false, (SpacingAfterParagraph + 30) + ',bottom');
                    break;
                case "linespacing":
                    if (commandOption === 'Remove Before Spacing') {
                        //删除段前距
                        rootElement.DCExecuteCommand("rowspacing", false, '0,top');
                    } else if (commandOption === 'Remove After Spacing') {
                        //删除段后距
                        rootElement.DCExecuteCommand("rowspacing", false, '0,bottom');
                    } else {
                        //行间距
                        rootElement.DCExecuteCommand("lineheight", false, commandOption);
                        rootElement.RefreshDocument();
                    }
                    break;
                case "search":
                    rootElement.SearchAndReplaceDialog();
                    break;
                case "inputfiletext":
                    var options = {
                        "ContentReadonly": null,
                        "UserEditable": true,
                        "Deleteable": true,
                        "ToolTip": "Please enter text",
                        "BackgroundText": "Text",
                        "Text": "",
                        "InnerValue": "",
                        "EnableValueValidate": true,
                        "Name": "Text",
                        "ID": "txtAge",
                        "Alignment": "Near",
                        "BackgroundTextColor": null,
                        "TextColor": null,
                        "SpecifyWidth": "0",
                        "BackgroundColor": "yellow",
                        "StartBorderText": "【",
                        "EndBorderText": "】",
                        "LabelText": "Text：",
                        "UnitText": "",
                    };
                    rootElement.DCExecuteCommand("InsertInputField", false, options);
                    break;
                case "inputfileselect":
                    var options = {
                        "ID": "af4d83e8-8857-4f41-848e-c7576bba99c9",
                        "InnerText": "",
                        "Text": "",
                        "TypeName": "XTextInputFieldElement",
                        "AcceptTab": false,
                        "EnableValueValidate": true,
                        "Name": "af4d83e8-8857-4f41-848e-c7576bba99c9",
                        "InnerValue": "Option1",
                        "BackgroundText": "XXXX",
                        "EnableHighlight": "Enabled",
                        "UserEditable": true,
                        "MoveFocusHotKey": "Default",
                        "EditorActiveMode": "F2, MouseDblClick, MouseClick",
                        "InnerEditStyle": "DropdownList",
                        "InnerMultiSelect": false,
                        "ListValueSeparatorChar": ",",
                        "ListItems": [
                            {
                                "Text": "Option1",
                                "TextInList": "",
                                "Value": "Option1",
                                "ID": null
                            },
                            {
                                "Text": "Option1",
                                "TextInList": "",
                                "Value": "Option1",
                                "ID": null
                            }
                        ],
                    };
                    rootElement.DCExecuteCommand("InsertInputField", false, options);
                    break;
                case "inputfiletime":
                    var options = {
                        "ID": "入院日期",
                        "Width": 0,
                        "Height": 0,
                        "Visible": true,
                        "InnerText": "yyyy/MM/dd HH:mm",
                        "Modified": false,
                        "Text": "",
                        "Style": {
                            "Bold": false,
                            "ColorString": "#000000FF",
                            "VerticalAlign": "Top",
                            "Align": "Left",
                            "BorderTop": false,
                            "BorderRight": false,
                            "BorderLeft": false,
                            "BorderBottom": false,
                            "BorderBottomColorString": "#000000FF",
                            "BorderRightColorString": "#000000FF",
                            "BorderLeftColorString": "#000000FF",
                            "BorderTopColorString": "#000000FF",
                            "BorderStyle": "Solid",
                            "BorderWidth": 0,
                            "PaddingBottom": 0,
                            "PaddingLeft": 0,
                            "PaddingRight": 0,
                            "PaddingTop": 0,
                            "BackgroundColorString": "#FFFFFF00",
                            "LineSpacing": 0,
                            "LeftIndent": 0,
                            "LineSpacingStyle": "SpaceSingle",
                            "SpacingAfterParagraph": 0,
                            "SpacingBeforeParagraph": 0,
                            "FirstLineIndent": 0,
                            "ParagraphOutlineLevel": -1,
                            "ParagraphMultiLevel": false,
                            "ParagraphListStyle": "None",
                            "FontStyle": "Regular",
                            "FontHeight": 0,
                            "FontName": "宋体",
                            "FontSize": 12,
                            "Underline": false,
                            "Italic": false,
                            "Strikeout": false,
                            "Index": -1
                        },
                        "OwnerPageIndex": 0,
                        "OwnerLastPageIndex": 0,
                        "Left": 0,
                        "AbsLeft": 1205.375,
                        "AbsTop": 460.25,
                        "Top": 0,
                        "TopInOwnerPage": 836.25,
                        "LeftInOwnerPage": 1436.375,
                        "TypeName": "XTextInputFieldElement",
                        "Parent": 36,
                        "NativeHandle": 37,
                        "OwnerCell": 36,
                        "OwnerTable": 2,
                        "PreviousElement": 38,
                        "NextElement": 39,
                        "OwnerLine": {
                            "Bottom": 101,
                            "AbsBottom": 548.125,
                            "AbsTop": 457.125,
                            "Top": 10,
                            "GlobalIndex": 5,
                            "Height": 91,
                            "IndexInPage": 5,
                            "OwnerPageIndex": 0
                        },
                        "StyleIndex": 3,
                        "AcceptTab": false,
                        "EnableValueValidate": true,
                        "ToolTip": null,
                        "ValidateStyle": null,
                        "Elements": [],
                        "Name": "3c7cfc26-995d-4cd0-a4a5-8990e0e49f12",
                        "InnerValue": null,
                        "BackgroundText": "yyyy/MM/dd HH:mm",
                        "EnableHighlight": "Enabled",
                        "UserEditable": false,
                        "MoveFocusHotKey": "Default",
                        "EditorActiveMode": "F2, MouseDblClick, MouseClick",
                        "InnerEditStyle": "DateTime",
                        "InnerMultiSelect": false,
                        "ListValueSeparatorChar": ",",
                        "DisplayFormat": {
                            "NoneText": null,
                            "Format": "yyyy/MM/dd HH:mm",
                            "Style": "DateTime"
                        },
                        "ListItems": null,
                        "BorderVisible": "Default",
                        "TabStop": true
                    };
                    rootElement.DCExecuteCommand("InsertInputField", false, options);

                    break;
                case "inputfilenumber":
                    var options = {
                        "ID": "number",
                        "Visible": true,
                        "InnerText": "XX",
                        "Name": "number",
                        "UnitText": "ml",
                        "BackgroundText": "XX",
                        "EnableHighlight": "Default",
                        "StartBorderText": "(",
                        "EndBorderText": ")",
                        "TextColor": "#FFFFFF00",
                        "BackgroundTextColor": "#FFFFFF00",
                        "BorderElementColor": "#00000000",
                        "EditorActiveMode": "F2, MouseDblClick, MouseClick",
                        "InnerEditStyle": "Numeric",
                    };
                    rootElement.DCExecuteCommand("InsertInputField", false, options);

                    break;
                case "pageindex":
                    var options = {
                        ID: "pageinfo1", //页码ID，可为空
                        Height: "65",   //页码元素高度，可为空
                        Width: "400",   //页码元素宽度，可为空
                        ValueType: "PageIndex", //页码元素类型,PageIndex代表显示为当前页号，NumOfPages显示为总页数，可为空
                        // FormatString: "第[%PageIndex%]页 共[%NumOfPages%]页" //页码文本格式化字符串，可为空
                        //SpecifyPageIndexTextList: "1,2,3,4"//自定义页码序号列表，可为空
                    };
                    rootElement.DCExecuteCommand('InsertPageInfoElement', false, options);
                    break;
                case "pagebreak":
                    rootElement.DCExecuteCommand("insertpagebreak", true, null);
                    break;
                case "specifycharacter":
                    rootElement.DCExecuteCommand("InsertSpecifyCharacter", true, {});
                    break;
                case "checkbox":
                    if (commandOption === 'Check Box') {
                        var options = {
                            "Name": "name001", //单选框的Name属性相同
                            "Type": "checkbox", //radio、checkbox
                            "ListItems": [
                                {
                                    "ID": "chk1",
                                    "ToolTip": "checkbox1",
                                    "MultiLine": "true",
                                    "Checked": "false",
                                    "StringTag": "checkbox1...",
                                    "VisualStyle": "CheckBox", //"Default", "CheckBox", "RadioBox", "SystemDefault", "SystemCheckBox", "SystemRadioBox"
                                    "Text": "checkbox1",
                                    "Value": "checkbox1",
                                    "CaptionFlowLayout": "false",//默认不使用流式排版
                                },
                                {
                                    "ID": "chk2",
                                    "ToolTip": "checkbox2",
                                    "MultiLine": "false",
                                    "Checked": "true",
                                    "StringTag": "checkbox2...",
                                    "VisualStyle": "CheckBox", //"Default", "CheckBox", "RadioBox", "SystemDefault", "SystemCheckBox", "SystemRadioBox"
                                    "Text": "checkbox2",
                                    "Value": "checkbox2",
                                    "CaptionFlowLayout": "false",//默认不使用流式排版
                                }
                            ]
                        };
                        rootElement.DCExecuteCommand("InsertCheckBoxOrRadio", false, options);

                    }
                    if (commandOption === 'Radio Box') {
                        var options = {
                            "Name": "name001", //单选框的Name属性相同
                            "Type": "radio", //radio、checkbox
                            "ListItems": [
                                {
                                    "ID": "chk1",
                                    "ToolTip": "radio1",
                                    "MultiLine": "true",
                                    "Checked": "false",
                                    "StringTag": "radio1.....",
                                    "VisualStyle": "RadioBox", //"Default", "CheckBox", "RadioBox", "SystemDefault", "SystemCheckBox", "SystemRadioBox"
                                    "Text": "radio1",
                                    "Value": "radio1",
                                    "CaptionFlowLayout": "false",//默认不使用流式排版
                                },
                                {
                                    "ID": "chk2",
                                    "ToolTip": "radio2",
                                    "MultiLine": "false",
                                    "Checked": "true",
                                    "StringTag": "radio2.....",
                                    "VisualStyle": "RadioBox", //"Default", "CheckBox", "RadioBox", "SystemDefault", "SystemCheckBox", "SystemRadioBox"
                                    "Text": "radio2",
                                    "Value": "radio2",
                                    "CaptionFlowLayout": "false",//默认不使用流式排版
                                }
                            ]
                        };
                        rootElement.DCExecuteCommand("InsertCheckBoxOrRadio", false, options);

                    }
                    break;
                case "image":
                    rootElement.DCExecuteCommand("InsertImage", true, null);
                    break;
                case "inserttable":
                    chooseTable();//展开选择表格对话框
                    break;
                case "deletetable":
                    rootElement.DCExecuteCommand("Table_DeleteTable", false, null);
                    break;
                case "mergecells":
                    rootElement.DCExecuteCommand("Table_MergeCell", false, null);
                    break;

                case "splitcells":
                    rootElement.ExecuteCommand("Table_SplitCellExt", false, '2,3');
                    break;
                case "readonly":
                    rootElement.Readonly = !rootElement.Readonly;
                    //readonly选中
                    var currentBtn = document.getElementById(commandItem.id);
                    if (rootElement.Readonly) {
                        currentBtn.classList.add('active');
                    } else {
                        currentBtn.classList.remove('active');
                    }
                    break;

                case "readviewmode":
                    rootElement.ReadViewMode = !rootElement.ReadViewMode;
                    //ReadViewMode选中
                    var currentBtn = document.getElementById(commandItem.id);
                    if (rootElement.ReadViewMode) {
                        currentBtn.classList.add('active');
                    } else {
                        currentBtn.classList.remove('active');
                    }
                    break;

                case "administratorviewmode":
                    rootElement.DCExecuteCommand('AdministratorViewMode', false, null);
                    //管理员选中
                    var currentBtn = document.getElementById(commandItem.id);
                    if (currentBtn.classList.contains('active')) {
                        currentBtn.classList.remove('active');
                    } else {
                        currentBtn.classList.add('active');
                    }
                    break;

                case "singlecolumn":
                case "multicolumn":
                case "horizontal":
                    rootElement.SetPageLayoutMode(commandName);
                    layoutActiveTrigger(command);
                    break;

                case "fontname":
                case "fontsize":
                    rootElement.DCExecuteCommand(commandName, false, commandOption);
                    break;
                case "printpreview":
                    rootElement.LoadPrintPreview({ PrintTableCellBorder: true });
                    break;
                case "closeprintpreview":
                    rootElement.ClosePrintPreview();
                    break;
                case "print":
                    rootElement.PrintDocument({ CompletedCallback: function () { console.log('打印成功'); } });
                    break;
                case "printpreviewcurrentpage":
                    rootElement.LoadPrintPreview({
                        PrintRange: 'CurrentPage'
                    });
                    break;
                case "printcurrentpage":
                    rootElement.PrintDocument({
                        PrintRange: "CurrentPage"
                    });
                    break;
                case "printoddpages":
                    rootElement.PrintDocument({
                        PrintMode: "EvenPage",//由于是0开始，所以奇偶数颠倒
                        CleanMode: true
                    });
                    break;
                case "printevenpages":
                    rootElement.PrintDocument({
                        PrintMode: "OddPage",//由于是0开始，所以奇偶数颠倒
                        CleanMode: true
                    });
                    break;
                case "colorstring":
                    rootElement.DCExecuteCommand('color', false, commandOption);
                    break;
                case "backgroundcolorstring": ;
                    rootElement.DCExecuteCommand('backcolor', false, commandOption);
                    break;
                default:

                    rootElement.DCExecuteCommand(commandName, false, null);
                    break;
            }

        }
        function GetCurrentWriterControl() {
            try {
                if (window && window.WriterControl_UI) {
                    return window.WriterControl_UI.GetCurrentWriterControl();
                }
            } catch (error) {
                console.error(error);
                return null;
            }
        }

        // 在页面加载完成后执行
        var tabHeader, tabContents;
        document.addEventListener('DOMContentLoaded', function () {
            tabHeader = document.getElementById('writerControlTabBtns');
            tabContents = document.getElementById('writerControlTabsContainer');
            // 初始化 toast 容器
            if (!document.getElementById('toastContainer')) {
                const tc = document.createElement('div');
                tc.id = 'toastContainer';
                tc.className = 'toast-container';
                document.body.appendChild(tc);
            }
            // 初始添加一个Tab
            addNewTab('Document 1', defaultXml);
        });
        let tabCount = 0;
        // 修改fileOpen函数以使用新的Tab系统
        function fileOpen() {
            let myWriterControl = GetCurrentWriterControl();
            let file = document.createElement('input');
            file.setAttribute('id', 'dcInputFile');
            file.setAttribute('type', 'file');
            file.setAttribute('accept', '.xml,.json,.rtf,.html,.htm,.odt,.ofd');
            file.style.display = 'none';
            document.body.appendChild(file);
            file.click();

            file.onchange = function () {
                let fileList = this.files;
                if (fileList.length > 0) {
                    console.log(fileList[0]);
                    let reader = new FileReader();
                    var isodt = fileList[0].name.toLowerCase().endsWith("odt") === true;
                    var isofd = fileList[0].name.toLowerCase().endsWith("ofd") === true;
                    if (isodt || isofd) {
                        reader.readAsArrayBuffer(fileList[0]);
                    } else {
                        reader.readAsText(fileList[0], "UTF-8");
                    }

                    reader.onload = function (e) {
                        //获取到文件内容
                        let strFileContent = e.target.result;
                        //获取文件格式
                        let fileFormat = "xml";
                        var fileName = '新建文档';
                        fileFormat = fileList[0].name.substring(fileList[0].name.lastIndexOf(".") + 1);
                        fileName = fileList[0].name.substring(0, fileList[0].name.lastIndexOf("."));

                        // 创建新Tab
                        const { tabId, tabContent } = addNewTab(fileName, strFileContent);
                    };
                }
                // 移除input元素
                file.remove();
            };
        }
        // 轻量气泡提示，不阻塞页面
        function showToast(message, duration = 1800) {
            try {
                const container = document.getElementById('toastContainer') || (function () {
                    const tc = document.createElement('div');
                    tc.id = 'toastContainer';
                    tc.className = 'toast-container';
                    document.body.appendChild(tc);
                    return tc;
                })();
                const bubble = document.createElement('div');
                bubble.className = 'toast-bubble';
                bubble.textContent = message;
                container.appendChild(bubble);
                requestAnimationFrame(() => bubble.classList.add('show'));
                setTimeout(() => {
                    bubble.classList.remove('show');
                    setTimeout(() => bubble.remove(), 220);
                }, duration);
            } catch (_) { /* no-op */ }
        }

        // 添加新Tab
        function addNewTab(fileName = '', content = '') {
            if (tabCount >= 8) {
                showToast('Cannot exceed 8 tab pages.');
                return;
            }
            tabCount++;
            const tabId = 'tab-' + tabCount;
            const tabName = fileName || `Text ${tabCount}`;

            // 创建Tab按钮
            const tabBtn = document.createElement('div');
            tabBtn.className = 'document-container-btn-item';
            tabBtn.dataset.tabId = tabId;
            tabBtn.innerHTML = `
            <span>${tabName}</span>
            <span class="document-container-btn-item-close" title="Close" data-tab-id="${tabId}">
            ${SVG_Dictionary.close}
            </span>
        `;

            // 创建Tab内容
            const tabContent = document.createElement('div');
            tabContent.className = 'document-container-item';
            tabContent.id = tabId;
            tabContent.dataset.containerId = tabId;
            tabContent.innerHTML = `
            <div id="myWriterControl-${tabCount}" 
            dctype="WriterControlForWASM" 
            RuleVisible="true" 
            AllowDrop="true"
            autoCreateControl="false"
                AllowDragContent="true" RuleBackColor="rgba(155, 187, 227,00)"
                ServicePageUrl="https://www.dcwriter.cn:6788/ServicePage.aspx"
                PageCssString222="box-shadow:1px 1px 1px grey"
                DocumentOptions.ViewOptions.ShowPageBreak=true
                DocumentOptions.BehaviorOptions.OutputFormatedXMLSource="false"
                DocumentOptions.BehaviorOptions.ParagraphFlagFollowTableOrSection="true"
                DocumentOptions.ViewOptions.ShowInputFieldStateTag="true"
                DocumentOptions.ViewOptions.IgnoreFieldBorderWhenPrint="false"
                DocumentOptions.ViewOptions.PrintBackgroundText="false"
                DocumentOptions.ViewOptions.PreserveBackgroundTextWhenPrint="true"
                DocumentOptions.ViewOptions.FieldBorderPrintVisibility="hidden"
                DocumentOptions.ViewOptions.FieldInvalidateValueForeColor="Blue"
                DocumentOptions.ViewOptions.TagColorForNormalField="Green"
                DocumentOptions.ViewOptions.TagColorForValueInvalidateField="Blue"
                DocumentOptions.ViewOptions.UnEditableFieldBorderColor="Yellow"
                DocumentOptions.SecurityOptions.EnablePermission="true"
                DocumentOptions.SecurityOptions.EnableLogicDelete="true"
                DocumentOptions.SecurityOptions.ShowLogicDeletedContent="true"
                DocumentOptions.SecurityOptions.ShowPermissionTip="true"
                DocumentOptions.SecurityOptions.ShowPermissionMark="true">
                loading...
            </div>
        `;

            // 如果是第一个Tab，设置为active
            if (tabCount === 1) {
                tabBtn.classList.add('document-container-btn-item-active');
                tabContent.classList.add('document-container-item-active');
            }

            // 添加到DOM
            tabHeader.appendChild(tabBtn);
            tabContents.appendChild(tabContent);

            //创建编辑器
            var newCtl = document.getElementById(`myWriterControl-${tabCount}`);
            if (window.CreateWriterControlForWASM) {
                window.CreateWriterControlForWASM && window.CreateWriterControlForWASM(newCtl);
                content && newCtl.LoadDocumentFromString(content, 'xml', null, function (result) {
                    alert('加载错误时会触发此回调');
                });
            } else {
                window.DCWriter5Started = function () {
                    window.CreateWriterControlForWASM(newCtl);
                    content && newCtl.LoadDocumentFromString(content, 'xml', null, function (result) {
                        alert('加载错误时会触发此回调');
                    });
                };
            }




            // 绑定点击事件
            tabBtn.addEventListener('click', function (e) {
                // 如果点击的是关闭按钮，不切换Tab
                if (e.target.classList.contains('document-container-btn-item-close') ||
                    e.target.closest('.document-container-btn-item-close')) {
                    return;
                }
                switchTab(tabId);

            });

            // 绑定关闭按钮事件
            const closeBtn = tabBtn.querySelector('.document-container-btn-item-close');
            closeBtn.addEventListener('click', function () {
                closeTab(tabId);
            });

            // 切换到新添加的Tab
            switchTab(tabId);

            // 新建后滚动到可见区域
            try {
                const createdBtn = document.querySelector(`.document-container-btn-item[data-tab-id="${tabId}"]`);
                if (createdBtn) {
                    ensureTabBtnVisible(createdBtn);
                }
            } catch (e) { /* no-op */ }

            return { tabId, tabContent };
        }

        // 切换Tab
        function switchTab(tabId) {
            // 移除所有active类
            document.querySelectorAll('.document-container-btn-item').forEach(btn => {
                btn.classList.remove('document-container-btn-item-active');
            });
            document.querySelectorAll('.document-container-item').forEach(content => {
                content.classList.remove('document-container-item-active');
            });

            // 添加active类到当前Tab
            const tabBtn = document.querySelector(`.document-container-btn-item[data-tab-id="${tabId}"]`);
            const tabContent = document.getElementById(tabId);

            if (tabBtn) tabBtn.classList.add('document-container-btn-item-active');
            if (tabContent) tabContent.classList.add('document-container-item-active');
            //每次切换都需要重置一下状态
            initToolbarActive();

            // 切换后保证按钮可见
            if (tabBtn) {
                ensureTabBtnVisible(tabBtn);
            }

        }

        // 关闭Tab
        function closeTab(tabId) {
            // 不能关闭最后一个Tab
            if (document.querySelectorAll('.document-container-btn-item').length <= 1) {
                alert('At least one tab needs to be retained !');
                return;
            }

            const tabBtn = document.querySelector(`.document-container-btn-item[data-tab-id="${tabId}"]`);
            const tabContentDocument = document.getElementById(tabId);

            // 如果关闭的是当前活动的Tab，需要激活前一个Tab
            if (tabBtn && tabBtn.classList.contains('document-container-btn-item-active')) {
                const prevTabBtn = tabBtn.previousElementSibling || tabBtn.nextElementSibling;
                if (prevTabBtn) {
                    switchTab(prevTabBtn.dataset.tabId);
                }
            }

            // 从DOM中移除
            if (tabBtn) tabBtn.remove();
            if (tabContentDocument) tabContentDocument.remove();
            tabCount--;

            // 删除后，若当前激活的 Tab 不在可视范围，滚动使其可见
            const activeTabBtn = document.querySelector('.document-container-btn-item-active');
            if (activeTabBtn) {
                ensureTabBtnVisible(activeTabBtn);
            }
        }

        // 确保指定的 tab 按钮在横向滚动容器内完全可见（若已可见则不滚动）
        function ensureTabBtnVisible(tabBtn) {
            const container = tabHeader; // #writerControlTabBtns
            if (!container || !tabBtn) return;
            const containerLeft = container.scrollLeft;
            const containerRight = containerLeft + container.clientWidth;
            const btnLeft = tabBtn.offsetLeft;
            const btnRight = btnLeft + tabBtn.offsetWidth;

            if (btnLeft < containerLeft) {
                container.scrollTo({ left: btnLeft, behavior: 'smooth' });
            } else if (btnRight > containerRight) {
                container.scrollTo({ left: btnRight - container.clientWidth, behavior: 'smooth' });
            }
        }

        //表格选择
        function chooseTable() {
            if (document.getElementById("chooseTableDialog")) {
                return;
            }

            var btnInsertTable = document.getElementById('btnInsertTable');
            var left = btnInsertTable.offsetLeft + btnInsertTable.offsetWidth;
            var top = btnInsertTable.offsetTop + (btnInsertTable.offsetHeight / 2);

            var chooseTableDialog = document.createElement('div');
            chooseTableDialog.id = "chooseTableDialog";
            chooseTableDialog.style.cssText = `
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 99;
            `;

            var chooseTableBox = document.createElement('div');
            chooseTableBox.id = "chooseTableBox";
            chooseTableBox.innerHTML = `
                <div id="grid"></div>
                <div id="tableSize" style="text-align: center; margin-top: 5px;"></div>
            `;
            chooseTableBox.style.cssText = `
                position: fixed;
                top: ${top}px;
                left: ${left}px;
                z-index: 9999;
                background: white;
                padding: 10px;
                border: 1px solid #ccc;
                box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            `;
            chooseTableDialog.appendChild(chooseTableBox);

            chooseTableDialog.addEventListener('click', function (e) {
                if (e.target === chooseTableDialog) {
                    chooseTableDialog.remove();
                }
            });

            document.body.appendChild(chooseTableDialog); // 应该添加到body而不是按钮上


            // 初始化表格选择器
            var grid = document.getElementById('grid');
            grid.style.display = 'inline-block';
            //清理高亮
            grid.addEventListener('mouseleave', () => {
                highlightCells(0, 0);
                lastHighlighted = { row: 0, col: 0 };
            });
            // 创建10x10的网格
            for (var i = 1; i <= 10; i++) {
                var rowDiv = document.createElement('div');
                rowDiv.className = 'row';
                rowDiv.style.display = 'flex';
                grid.appendChild(rowDiv);

                for (var j = 1; j <= 10; j++) {
                    var cellDiv = document.createElement('div');
                    cellDiv.className = 'cell';
                    cellDiv.style.width = '20px';
                    cellDiv.style.height = '20px';
                    cellDiv.style.border = '1px solid #ccc';
                    cellDiv.style.marginTop = '-1px';
                    cellDiv.style.marginLeft = '-1px';
                    cellDiv.style.backgroundColor = '#fff';
                    cellDiv.title = `${i}×${j} Table`;
                    cellDiv.dataset.row = i;
                    cellDiv.dataset.col = j;
                    rowDiv.appendChild(cellDiv);

                    // 使用闭包捕获当前的i和j值
                    (function (row, col) {
                        cellDiv.addEventListener('mouseover', function () {
                            highlightCells(row, col);
                        });

                        cellDiv.addEventListener('click', function () {
                            // 在这里插入表格的逻辑
                            var options = {
                                "TableID": "Table" + (new Date().getTime()),
                                "RowCount": row,
                                "ColumnCount": col,
                                "AutoMaticCorrectionRepeatID": true
                            };
                            var rootElement = GetCurrentWriterControl();
                            rootElement.DCExecuteCommand('InsertTable', false, options);

                            chooseTableDialog.remove();
                        });
                    })(i, j);
                }
            }


            // 单元格高亮
            function highlightCells(row, col) {
                var sizeDisplay = document.getElementById('tableSize');
                sizeDisplay.textContent = `${row}×${col} Table`;
                var cells = document.querySelectorAll('.cell');
                cells.forEach(function (cell) {
                    var cellRow = parseInt(cell.dataset.row);
                    var cellCol = parseInt(cell.dataset.col);
                    if (cellRow <= row && cellCol <= col) {
                        cell.style.backgroundColor = '#9bbbe3';
                    } else {
                        cell.style.backgroundColor = '#fff';
                        cell.style.borderColor = '#ccc';
                    }
                });
            }
        }


        //工具条初始化状态
        function initToolbarActive() {
            var rootElement = GetCurrentWriterControl();
            if (!rootElement) {
                return;
            }

            var allActiveBtns = document.querySelectorAll('.control-btn.active');
            allActiveBtns.forEach(function (btn) {
                btn.classList.remove('active');
            });
            //修改工具条中字体选中状态
            if (toolboxdescription && toolboxdescription.toolBars && toolboxdescription.toolBars.length) {
                var currentStyle = rootElement.CurrentStyle;
                for (var i = 0; i < toolboxdescription.toolBars.length; i++) {
                    if (toolboxdescription.toolBars[i].title === 'Start') {
                        var toolbar = toolboxdescription.toolBars[i];
                        if (toolbar.groups && toolbar.groups.length) {
                            for (var j = 0; j < toolbar.groups.length; j++) {
                                var group = toolbar.groups[j];
                                if (group.text === 'Font') {
                                    if (group.childItems && group.childItems.length) {
                                        for (var k = 0; k < group.childItems.length; k++) {
                                            var item = group.childItems[k];
                                            var fontBtnItem = document.getElementById(item.id);
                                            if (item.type === 'button') {
                                                if (typeof currentStyle[item.commandName] == 'boolean') {
                                                    if (currentStyle[item.commandName]) {
                                                        fontBtnItem.classList.add('active');
                                                    }
                                                }

                                            } else if (item.type === 'select') {
                                                // 字体名称、大小
                                                if (currentStyle[item.commandName]) {
                                                    fontBtnItem.value = currentStyle[item.commandName];
                                                }
                                            } else if (item.type === 'colorPicker') {
                                                // 字体颜色、字体背景色
                                                if (currentStyle[item.commandName]) {
                                                    var iconPath = document.getElementById(`dcIconpath${item.commandName}`);
                                                    if (iconPath) {
                                                        iconPath.setAttribute('fill', currentStyle[item.commandName]);
                                                    }
                                                }
                                            }

                                        }
                                    }
                                }


                            }
                        }

                    }

                }
            }

            //只读状态
            var Readonly = rootElement.Readonly;
            var btnReadonly = document.getElementById('btnReadonly');
            if (Readonly) {
                btnReadonly.classList.add('active');
            }

            //阅读状态
            var ReadViewMode = rootElement.ReadViewMode;
            var btnReadViewMode = document.getElementById('btnReadViewMode');
            if (ReadViewMode) {
                btnReadViewMode.classList.add('active');
            }

            //布局状态
            var pagelayoutmode = rootElement.getAttribute('pagelayoutmode');
            if (pagelayoutmode) {
                pagelayoutmode = pagelayoutmode.toLowerCase().trim() || '';
                layoutActiveTrigger(pagelayoutmode);
            }

            //对齐方式
            var align = rootElement.CurrentParagraphAlign;
            if (align && align.length > 0) {
                paragraphAlignActiveTrigger(align);
            }


        }
        //布局状态切换
        function layoutActiveTrigger(pagelayoutmode) {
            var layoutObject = {
                'singlecolumn': 'btnSingleColumn',
                'multicolumn': 'btnMultiColumn',
                'horizontal': 'btnHorizontal'
            };
            var id = layoutObject[pagelayoutmode];
            var groupID = Object.values(layoutObject);
            for (var i = 0; i < groupID.length; i++) {
                var currentBtn = document.getElementById(groupID[i]);
                currentBtn.classList.remove('active');
                if (currentBtn.id === id) {
                    currentBtn.classList.add('active');
                }
            }
        }

        //对齐方式状态切换
        function paragraphAlignActiveTrigger(alignmode) {
            var alignObject = {
                'Left': 'btnAlignLeft',
                'Center': 'btnAlignCenter',
                'Right': 'btnAlignRight',
                'Distribute': 'btnAlignDistribute'
            };
            var id = alignObject[alignmode];
            var groupID = Object.values(alignObject);
            for (var i = 0; i < groupID.length; i++) {
                var currentBtn = document.getElementById(groupID[i]);
                currentBtn.classList.remove('active');
                if (currentBtn.id === id) {
                    currentBtn.classList.add('active');
                }
            }
        }

    </script>

</body>

</html>